<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="uesr">账号：</label>
        <input type="text" id="uesr">
        <br>
        <label for="name">昵称：</label>
        <input type="text" id="name">
        <br>
        <label for="mailbox">电子邮箱：</label>
        <input type="text" id="mailbox">
        <br>
        <label for="ident">身份证：</label>
        <input type="text" id="ident">
        <br>
        <label for="phone">手机号码：</label>
        <input type="text" id="phone">
        <br>
        <label for="birthday">生日日期：</label>
        <input type="text" id="birthday">
        <br>
        <label for="mima">密码：</label>
        <input type="password" id="mima">
        <br>
        <label for="mima2">请再次输入密码：</label>
        <input type="password" id="mima2">
        <br>
        <input type="button" value="确认" id="enter">
        <input type="reset" value="清空" id="reset">
    </form>
    <script>
        var uesr = document.getElementById('uesr');
        var name_ = document.getElementById('name');
        var mailbox_ = document.getElementById('mailbox');
        var ident = document.getElementById('ident');
        var phone = document.getElementById('phone');
        var birthday = document.getElementById('birthday');
        var mima = document.getElementById('mima');
        var mima2 = document.getElementById('mima2');

    //     【1】验证账号
    // - 用户名不能为空
    // - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
    // - 必须以字母开头
    // - 长度6-20
    
        uesr.onblur = function(){
            if(uesr.value == ''){
                return alert('该信息不能为空')
            }
            var reg =/^[a-z](\w|-){5,19}$/i;
            if(reg.test(uesr.value)){
                alert('该账户名符合要求')
            }else{
                alert(
                '1不能使用特殊字符（只能使用数字、字母、下划线、横杠)'+
                '2必须以字母开头'+
                '3长度6-20')
            }
        }

        // 昵称只能输入3-6个中文 
        name_.onblur = function(){
            if(uesr.value == ''){
                return alert('该信息不能为空')
            }
            var reg = /^[\u4e00-\u9fa5]{3,6}$/ ;
            if(reg.test(name_.value)){
                alert('恭喜你，昵称可用')
            }else{
                alert('该昵称不符合规则')
            }
        }

    //     电子邮件
    //   + 163邮箱：
    //   + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
    //   + @后面的域名只能是163
    //   + 域名后缀（.com .cn .net）可以有多个。
        mailbox_.onblur = function(){
            if(uesr.value == ''){
                return alert('该信息不能为空')
            }
            var reg = /^[a-z]\w{5,12}@163\.(com|cn|net)$/i;
            if(reg.test(this.value)){
                alert('邮箱正确')
            }else{
                alert('邮箱格式错误')
            }
        }
    //身份证 18位数 后面以为可能是 X x 
        ident.onblur = function(){
            if(uesr.value == ''){
                return alert('该信息不能为空')
            }
            var reg = /^\d{17}[xX\d]$/;
            if(reg.test(this.value)){
                alert('身份证正确')
            }else{
                alert('身份证格式错误')
            }
        }

//         手机号码
// -   11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了
        phone.onblur = function(){
            if(uesr.value == ''){
                return alert('该信息不能为空')
            }
            var reg = /^1[345678]\d{8,9}$/;
            if(reg.test(this.value)){
                alert('手机号码正确')
            }else{
                alert('手机号码格式错误')
            }
        }

        // 生日验证
        // + 1999/05/08
        // + 1999-05-08
        // + 19990508
        birthday.onblur = function(){
            if(uesr.value == ''){
                return alert('该信息不能为空')
            }
            var reg = /^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/;
            if(reg.test(this.value)){
                alert('生日格式正确')
            }else{
                alert('该日期格式错误')
            }
        }

//         密码  
//   + 长度小于20 
//   + 不能包含空格 密码不一致不能提交
        mima.onblur = function(){
            var reg = /^\s{1,20}$/;
            if(reg.test(this.value)){
                alert('该密码符合规则')
            }else{
                alert('该密码不符合规则')
            }  
        }

        mima2.onblur = function(){
            if(mima2.value == mima.value){
                alert('密码一致')
            }else{
                alert('密码不一致请重新输入')
            }
        }
    </script>
</body>
</html>